<template>
  <div>
    <el-form ref="form" label-width="80px">
      <el-form-item label="SPU名称">
        {{ spu.spuName }}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input placeholder="sku名称" v-model="skuInfo.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input placeholder="价格(元)" type="number" v-model="skuInfo.price"></el-input>
      </el-form-item>
      <el-form-item label="重量(千克)">
        <el-input placeholder="重量(千克)" v-model="skuInfo.weight"></el-input>
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input type="textarea" rows="4" placeholder="规格描述" v-model="skuInfo.skuDesc"></el-input>
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item style="margin-bottom:10px;" :label="attr.attrName" v-for="(attr, index) in attrInfoList" :key="attr.id">
            <el-select placeholder="请选择" v-model="attr.attrIdAndValueId">
              <el-option :label="attrValue.valueName" :value="`${attr.id}:${attrValue.id}`" v-for="(attrValue, index) in attr.attrValueList" :key="attrValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form :inline="true" label-width="80px">
          <el-form-item style="margin-bottom: 10px;" :label="saleAttr.saleAttrName" v-for="(saleAttr, index) in saleAttrList" :key="saleAttr.id">
            <el-select placeholder="请选择" v-model="saleAttr.saleAttrIdAndsaleValueId">
              <el-option :label="saleValue.saleAttrValueName" :value="`${saleAttr.id}:${saleValue.id}`" v-for="(saleValue, index) in saleAttr.spuSaleAttrValueList" :key="saleValue.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table style="width: 100%" border :data="spuImageList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="80"> </el-table-column>
          <el-table-column prop="prop" label="图片" width="width">
            <template slot-scope="scope">
                <img :src="scope.row.imgUrl" style="width: 60px; height:60px;">
            </template>
          </el-table-column>
          <el-table-column prop="imgName" label="名称" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="scope">
                <el-button type="primary" size="mini" v-if="scope.row.isDefault==0" @click="changeIsDefault(scope.row)">设置默认</el-button>
                <el-button size="mini" v-else>默认</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSku">保存</el-button>
        <el-button @click="cancle">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "SkuFrom",
  data() {
    return {
      spu: {},
      saleAttrList: [], //销售销售属性
      spuImageList: [], //图片信息
      attrInfoList: [], //平台属性数据
      //sku表单收集的数据   
      skuInfo: {
        // 第一类，父组件传递的数据
        category3Id: 0,
        spuId: 0,
        tmId: 0,
        // 第二类，表单v-mode收集数据
        skuName: "",
        price: "",
        weight: "",
        skuDesc: "",
        // 第三类，代码收集
        isSale: 0,
        skuDefaultImg: "",
        skuAttrValueList: [
        //   {
            // attrId: 0,
            // attrName: "string",
            // id: 0,
            // skuId: 0,
            // valueId: 0,
            // valueName: "string",
        //   },
        ],
        skuImageList: [
        //   {
        //     id: 0,
        //     imgName: "string",
        //     imgUrl: "string",
        //     isDefault: "string",
        //     skuId: 0,
        //     spuImgId: 0,
        //   },
        ],
        skuSaleAttrValueList: [
        //   {
        //     id: 0,
        //     saleAttrId: 0,
        //     saleAttrName: "string",
        //     saleAttrValueId: 0,
        //     saleAttrValueName: "string",
        //     skuId: 0,
        //     spuId: 0,
        //   },
        ],
      },
      imageList:[], //收集图片信息
    };
  },
  methods: {
    // 获取sku表单所需数据,需要category1Id, category2Id, category3Id, spuId
    getSkuData(row, category1Id, category2Id) {
      // 父组件传的可用参数
      this.spu.spuName = row.description;
      this.skuInfo.category3Id = row.category3Id
      this.skuInfo.spuId = row.id
      this.skuInfo.tmId = row.tmId
      // row -> category3Id, spuId,还需要category1Id, category2Id
      return new Promise((resolve, reject) => {
        // 平台销售属性
        this.$API.spu
          .reqspuSaleAttrList(row.id)
          .then((response) => {
            this.saleAttrList = response.data;
            console.log("saleAttrList", this.saleAttrList);
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
        // 图片信息
        this.$API.spu
          .reqspuImageList(row.id)
          .then((response) => {
            let list = response.data;
            list.forEach(item => {
                item.isDefault = 0
            });
            this.spuImageList = list
            console.log("spuImageList", this.spuImageList);
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
        // 平台属性数据
        this.$API.spu
          .reqgetCategoryInfoList(category1Id, category2Id, row.category3Id)
          .then((response) => {
            this.attrInfoList = response.data;
            console.log("attrInfoList", this.attrInfoList);
            resolve();
          })
          .catch((error) => {
            reject(error);
          });
      });
    },
    // 图片列表table复选框点击事件
    handleSelectionChange(parmas){
        this.imageList = parmas
    },
    // 改变是否默认
    changeIsDefault(row){
        // 排他，所有设置默认，点击显示默认
        this.spuImageList.forEach(item => {
            item.isDefault = 0
        })
        row.isDefault = 1
        // 收集默认图片
        this.skuInfo.skuDefaultImg = row.imgUrl
    },
    // 取消
    cancle(){
        this.$emit('skuFormtoSpuInfo', 0)
        // 清除数据
        Object.assign(this._data, this.$options.data())
    },
    // 保存，整理参数
    saveSku(){
        // 整理平台属性和销售属性，用两种方法实现
        const {attrInfoList, skuInfo, saleAttrList} = this
        // 平台属性
        let arr = []
        attrInfoList.forEach(item => {
            if(item.attrIdAndValueId){
                const [attrId, valueId] = item.attrIdAndValueId.split(':')
                let obj = {attrId, valueId}
                arr.push(obj)
            }
        })
        skuInfo.skuAttrValueList = arr
        // 销售属性
        skuInfo.skuSaleAttrValueList = saleAttrList.reduce((prev,item) => {
            if(item.saleAttrIdAndsaleValueId){
                const [saleAttrId, saleAttrValueId] = item.saleAttrIdAndsaleValueId.split(':')
                prev.push({saleAttrId, saleAttrValueId})
            }
            return prev
        },[])
        // 整理图片信息, 数组映射
        skuInfo.skuImageList = this.imageList.map(item => {
            return{
                imgName: item.imgName,
                imgUrl: item.imgUrl,
                isDefault: item.isDefault,
                spuImgId: item.id
            }
        })
        return new Promise((resolve, reject) => {
            this.$API.spu.reqsaveSkuInfo(skuInfo).then((res) => {
                if(res.code == 200){
                    this.$message({type:"success", message:"保存成功"})
                    this.$emit('skuFormtoSpuInfo', 0)
                }
                resolve()
            }).catch(error => {
                reject(error)
            })
        })
    },  
  },
};
</script>

<style scoped>
</style>